<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8" />
        <link href="../../template/img/page-logo.png" rel="icon" type="image/png" />  
        <title>Task4 of IEF2016 Spring</title>  
    </head>
    
    <style>
        html,body,main{
            margin: 0;
            height: 100%;
        }
        
        main{ 
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        #box{
            width: 400px;
            height: 200px;
            background-color: #ccc;
            position: relative;
        }
        
        .corner{
            width: 50px;
            height: 50px;
            background-color: #fc0;
            position: absolute;
            
        }
        
        #left-fan{
            border-bottom-right-radius: 50px;
        }
        
        #right-fan{
            border-top-left-radius: 50px;
            right: 0px;
            bottom: 0px;
        }
    </style>
    
    <body>
        <main>
            <div id="box">
                <div class="corner" id="left-fan"></div>
                <div class="corner" id="right-fan"></div>
            </div>
        </main>
    </body>    
</html>